/* 收藏详情 */

.container {
  width: 1200px;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
  border-radius: 5px;
  margin: 80px auto 0;
  padding: 20px 54px 50px;
  box-sizing: border-box;
  ::v-deep .el-breadcrumb {
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 18px;
  }
  ::v-deep .el-breadcrumb__inner.is-link {
    font-weight: normal;
    color: #333;
  }
  ::v-deep .el-breadcrumb__inner.is-link:hover {
    color: #0193ff;
  }
  ::v-deep .el-breadcrumb__inner a:hover {
    color: #0193ff;
  }
  .answerSheet {
    .tit {
      font-size: 14px;
      color: $color-black;
      font-weight: 550;
    }
    .chooseType {
      margin: 18px 0;
      p {
        font-size: 14px;
        color: $color-black;
        font-weight: 550;
        display: inline-block;
        margin-right: 20px;
        &.choosed {
          color: #0193ff;
        }
      }
    }
    .tiNums {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 24px;
        height: 24px;
        background-color: #fcde84;
        border-radius: 3px;
        font-size: 12px;
        color: $color-white;
        text-align: center;
        line-height: 24px;
        margin-right: 15px;
        margin-bottom: 11px;
        box-sizing: border-box;
        &.noDo {
          background: $color-white;
          border: 1px solid #ccc;
          color: #595959;
        }
      }
    }
    .questionInfo {
      margin-top: 35px;

      .casebox {
        margin-bottom: 20px;
      }
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 17px;
        border-bottom: 1px solid #eee;
        h5 {
          font-size: 14px;
          color: $color-black;
          font-weight: 550;
        }
        .operations {
          display: flex;
          align-items: center;
          & > div {
            display: flex;
            align-items: center;
            margin-right: 20px;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
            img {
              margin-right: 5px;
              &:first-child {
                margin-top: 2px;
              }
            }
            span {
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
      .testTit {
        font-size: 14px;
        color: $color-black;
        line-height: 26px;
        margin: 28px 0 21px;
      }
      .options {
        .optionBox {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding-left: 5px;
          cursor: pointer;
          &.choosed {
            background-color: #fafafa;
            .option {
              background: #0193ff;
              color: $color-white;
            }
          }
          .option {
            width: 26px;
            height: 26px;
            background-color: #ededed;
            border-radius: 50%;
            font-size: 14px;
            color: $color-black;
            text-align: center;
            line-height: 26px;
            margin-right: 16px;
          }
          .optionText {
            max-width: 550px;
            font-size: 14px;
            color: $color-black;
          }
        }
        .activeCss {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          padding-left: 5px;
          cursor: pointer;
          &.choosed {
            background-color: #fafafa;
            .option {
              background: #0193ff;
              color: $color-white;
            }
          }
          .option {
            width: 26px;
            height: 26px;
            background-color: #0193ff;
            border-radius: 50%;
            font-size: 14px;
            color: $color-white;
            text-align: center;
            line-height: 26px;
            margin-right: 16px;
          }
          .optionText {
            font-size: 14px;
            color: $color-black;
          }
        }
      }
      .tbtn {
        text-align: left;
        padding: 0 10px;
        div {
          float: left;
          width: 50px;
          font-size: 14px;
          color: #666;
          height: 26px;
          line-height: 26px;
          text-align: center;
          border: 1px solid #00af63;
          border-radius: 5px;
        }
        div.active {
          color: #fff;
          background-color: #00af63;
        }
      }
      .openAnalysis {
        display: flex;
        justify-content: flex-end;
        margin-top: 47px;
        .btn {
          width: 112px;
          height: 28px;
          border-radius: 14px;
          border: solid 1px #0193ff;
          font-size: 14px;
          color: #0193ff;
          text-align: center;
          line-height: 26px;
          cursor: pointer;
          margin-left: 10px;
          // &:first-child {
          //     border-color: #f56705;
          //     color: #f56705;
          //     margin-left: 0px;
          // }
        }
      }
      .analysisBox {
        width: 854px;
        background-color: #f4f9f7;
        border-radius: 5px;
        margin-top: 37px;
        padding: 26px 43px 39px 24px;
        font-size: 14px;
        color: #333;
        & > div {
          display: flex;
          margin-bottom: 20px;
          ::v-deep .el-textarea__inner {
            min-height: 75px !important;
          }
          ::v-deep .el-progress-bar__outer {
            height: 8px !important;
          }
          &.center {
            align-items: center;
          }
          span.tit {
            display: inline-block;
            width: 72px;
            // font-size: 14px;
            // color: $color-green;
            color: #333;
            font-weight: 550;
          }
          span.testCenter {
            display: inline-block;
            width: 72px;
            height: 24px;
            border-radius: 5px;
            border: solid 1px #999999;
            font-size: 14px;
            // color: $color-black;
            text-align: center;
            line-height: 24px;
            margin-right: 25px;
          }
          span {
            color: $color-green;
          }
          &.btmLine {
            padding-bottom: 22px;
            border-bottom: 1px solid #eee;
          }
          .rightCon {
            .noteBox {
              & > div {
                display: flex;
              }
              .btns {
                justify-content: flex-end;
                button {
                  width: 123px;
                  height: 32px;
                  background: #00af63;
                  font-size: 14px;
                  color: $color-white;
                  border-radius: 5px;
                  cursor: pointer;
                  &:last-child {
                    background: $color-white;
                    color: $color-green;
                    border: 1px solid $color-green;
                    margin-left: 32px;
                  }
                }
              }
            }
            span {
              font-weight: normal;
              color: $color-black;
            }
            .nav {
              margin-bottom: 20px;
              p {
                font-size: 14px;
                color: #000;
                letter-spacing: 1px;
                text-indent: 24px;
                margin-right: 20px;
                display: inline-block;
                position: relative;
                &.act {
                  font-weight: 550;
                }
                &::after {
                  content: '';
                  width: 17px;
                  height: 18px;
                  background: url('@/assets/images/note0.png') no-repeat center;
                  background-size: cover;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                &:last-child {
                  &::after {
                    width: 16px;
                    height: 16px;
                    background: url('@/assets/images/icon_ask.png') no-repeat
                      center;
                    background-size: cover;
                  }
                }
              }
            }
            .updImg {
              display: flex;
              margin-top: 20px;
              .updBox {
                ::v-deep .el-upload--picture-card {
                  width: 118px;
                  height: 80px;
                  line-height: 80px;
                }
                ::v-deep .el-upload-list--picture-card .el-upload-list__item {
                  width: 118px;
                  height: 80px;
                  border-width: 0;
                }
              }
            }
            ul {
              li {
                display: inline-block;
                padding: 6px 20px;
                border: 1px solid #999;
                border-radius: 5px;
                font-size: 14px;
                color: $color-black;
                margin-right: 18px;
                cursor: pointer;
                &.act {
                  background: $color-green;
                  color: $color-white;
                  border-color: $color-green;
                }
              }
            }
          }
          &.listBox {
            display: block;
            margin-top: 22px;
            .topTab {
              margin-bottom: 24px;
              p {
                display: inline-block;
                font-size: 14px;
                color: $color-black;
                font-weight: 550;
                margin-right: 25px;
                &.act {
                  color: #0193ff;
                }
              }
            }
            .list {
              .item {
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;
                margin-bottom: 14px;
                .queName {
                  font-size: 14px;
                  color: $color-black;
                  margin-bottom: 19px;
                  span {
                    font-weight: 550;
                  }
                }
                .ans {
                  display: flex;
                  background-color: #ffffff;
                  border-radius: 5px;
                  padding: 15px;
                  position: relative;
                  .avatar {
                    width: 40px;
                    height: 40px;
                    background: #000;
                    border-radius: 5px;
                    margin-right: 16px;
                  }
                  .ansInfo {
                    p {
                      font-size: 14px;
                      color: #666;
                      font-weight: 550;
                      span {
                        color: #999;
                      }
                    }
                    .testCen {
                      span {
                        font-size: 14px;
                        color: $color-green;
                        font-weight: 550;
                        &:last-child {
                          display: inline-block;
                          font-size: 14px;
                          color: $color-black;
                          padding: 5px 7px;
                          border: 1px solid #999;
                          border-radius: 5px;
                        }
                      }
                    }
                  }
                  .dianzan {
                    position: absolute;
                    top: auto;
                    left: auto;
                    right: 34px;
                    bottom: 17px;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
        .yourAns {
          font-weight: 550;
          text-indent: 5px;
          span {
            &:first-child {
              color: $color-green2;
            }
          }
        }
      }
    }
  }
}
